<style type="text/css">

	.int-home {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.int-home .container { margin: 1em; }

	.int-home .title { font-size: 3em; }

	.int-home .message { margin: 1em 0 3em; }

	.int-home .footer {
		color: #808080;
		font-size: 0.8em;
		margin-top: 4em;
	}

	.int-home .footer a { color: #586c94; }

## IF weUI ##
	.int-home .weui-btn { width: 60%; }
## ELSE ##
	.int-home .btn { width: 60%; }
## FI weUI ##

</style>



<script type="text/html" id="interaction">

	<div class="int-home" data-title="[nls@strings:title_home]">
		<div class="container">
			<h1 class="title">[nls@strings:text_hello]</h1>
			<p class="message">[nls@strings:text_message]</p>
## IF weUI ##
			<a class="weui-btn weui-btn_primary" staple:click="showAbout">[nls@strings:btn_about]</a>
			<a class="weui-btn weui-btn_default" id="quit">[nls@strings:btn_quit]</a>
## ELSE ##
			<a class="btn btn-primary" staple:click="showAbout">[nls@strings:btn_about]</a>
			<a class="btn btn-default" id="quit">[nls@strings:btn_quit]</a>
## FI weUI ##
			<p class="footer">[nls@strings:text_footer]</p>
		</div>
	</div>

</script>
